<template>
  <div class="form-wrapper">
    <van-form>
      <van-cell-group class="form-content">
        <van-field required label="申请类型">
          <template #input>
            <van-radio-group v-model="formData.type" @change="typeChange" direction="horizontal">
              <van-radio name="1" shape>公司</van-radio>
              <van-radio name="2" shape>个人</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          required
          input-align="right"
          v-model="formData.name"
          name="公司名称"
          label="公司名称"
          maxlength="20"
          placeholder="公司名称"
          v-if="formData.type == 1"
        />
        <van-field
          required
          input-align="right"
          v-model="formData.name"
          name="姓名"
          label="姓名"
          maxlength="20"
          placeholder="姓名"
          v-if="formData.type == 2"
        />
        <van-field
          required
          input-align="right"
          v-model="formData.mobile"
          name="联系电话"
          label="联系电话"
          maxlength="11"
          placeholder="手机号"
        />
        <van-field
          required
          readonly
          is-link
          input-align="right"
          v-model="addressName"
          name="所在城市"
          label="所在城市"
          placeholder="省市区"
          @click="addressShow = true"
        />
        <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="area"></yd-cityselect>
        <van-field
          required
          readonly
          is-link
          v-if="strShow"
          input-align="right"
          v-model="street"
          name="街道"
          label="街道"
          placeholder="请选择街道"
          @click.stop="streetShow = true"
        />
        <van-popup v-model="streetShow" position="right" :style="{width:'100%'}" >
          <van-nav-bar
            title="选择街道"
            left-arrow
            @click-left="onClickLeft"
            fixed="true"
          />
          <div style="clear: both; margin-top: 2.5rem;"></div>
          <van-cell
            :border="false"
            is-link
            :key="i"
            arrow
            v-for="(item, i) in districtVal"
            @click.native="streetConfirm(item)"
            title-style="text-align:left"
            :clickable="false"
          >
            <span slot="title">{{ item.areaname }}</span>
            <span slot="default"></span>
          </van-cell>
        </van-popup>
        <van-field
          required
          input-align="right"
          v-model="formData.address"
          name="详细地址"
          label="详细地址"
          maxlength="20"
          placeholder="街道楼排号等"
        />
        <van-cell title="营业执照" required v-if="formData.type == 1">
          <template slot="label">
            <div v-for="(val, index) in formData.license" :key="index">
              <div class="photoBox">
                <img :src="val" style="width: 100%;" />
                <i @click="removeImage(index)"></i>
              </div>
            </div>
            <van-uploader :after-read="multipleMethod_1" multiple>
              <div
                style="padding: 0.2rem; width: 4.25rem; height: 4.25rem; border: 1px dashed #c0ccda; margin: 0 auto; display: flex;"
              >
                <img src="../assets/images/up_icon.png" style="width: 50%; height: 50%;" class="avatar" />
              </div>
            </van-uploader>
          </template>
        </van-cell>
        <template v-if="formData.type == 2">
          <van-cell title="身份证人像面" required>
            <div class="otherphoto" slot="label">
              <div class="imgflex" @click="selectIndex(6)">
                <van-uploader :after-read="onRead" :max-size="photosize" @oversize="onphotosize" style="width: 100%;">
                  <div style="width: 100%; height: 11rem;">
                    <img
                      :src="
                        formData.identity_1 ? formData.identity_1 : require('../assets/images/bg_idcard_up@2x.png')
                      "
                      style="width: 100%; height: 100%;"
                      class="avatar"
                    />
                  </div>
                </van-uploader>
              </div>
            </div>
          </van-cell>
          <van-cell title="身份证国徽面" required>
            <div class="otherphoto" slot="label">
              <div class="imgflex" @click="selectIndex(5)">
                <van-uploader :after-read="onRead"  style="width: 100%;">
                  <div style="width: 100%; height: 11rem;">
                    <img
                      :src="
                        formData.identity_2 ? formData.identity_2 : require('../assets/images/bg_idcard_down@2x.png')
                      "
                      style="width: 100%; height: 100%;"
                      class="avatar"
                    />
                  </div>
                </van-uploader>
              </div>
            </div>
          </van-cell>
        </template>
      </van-cell-group>
      <div class="submit-btn">
        <van-button @click="submit" type="info" block>提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import applyForm_controller from './applyForm_controller'
export default applyForm_controller;
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.form-wrapper {
  text-align: left;
}
.van-cell__value .van-radio {
  display: flex;
}
.photoBox {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px dashed #c0ccda;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;

  div {
    width: 100%;
    height: 100%;
  }

  img {
    width: 100%;
    height: 100%;
  }

  i {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    background: url("../assets/images/close_iocn.png");
    background-size: 100%;
  }
}
.otherphoto {
  padding: 0.625rem;

  .photobox {
    position: relative;
    width: 5rem;
    height: 5rem;
    border: 1px dashed #c0ccda;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;

    img {
      width: 100%;
      height: 100%;
    }

    i {
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      top: 0.1rem;
      right: 0.1rem;
      background: url('../assets/images/close_iocn.png');
      background-size: 100%;
    }
  }
}

.form-content {
  margin-bottom: calc(70px + constant(safe-area-inset-bottom));
  margin-bottom: calc(70px + env(safe-area-inset-bottom));
}

.submit-btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 5px #aaa;
  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
</style>